<template>
  <div class="test-record">
    <white-header
      :isShowTopNav="true"
      :isShowBack="true"
      :isShowRight="true"
      :title="title"
    ></white-header>
    <div class="record-list">
      <div
        class="record-item"
        v-for="(item, index) in record_list"
        :key="'record_list' + index"
        @click="toPath(item)"
      >
        <div class="test-top">
          <div class="top-left">
            {{ item.paperName || "未知" }}
          </div>
          <template v-if="item.status == 2">
            <div
              class="top-right"
              style="color: #84d29f;"
              v-if="item.score >= item.passScore"
            >
              及格
            </div>
            <div class="top-right" style="color: #f99797;" v-else>不及格</div>
          </template>
          <!-- <div class="top-right" style="color: #f99797;">不及格</div> -->
        </div>
        <div class="test-center">
          <template v-if="item.status == 2">
            <img src="/img/mobile/record_answer.png" alt="" />
            <span
              >答对：<span class="red"
                >{{ item.trueCount }}/{{ item.allCount }}</span
              ></span
            >
            <div class="line"></div>
          </template>
          <img src="/img/mobile/record_clock.png" alt="" />
          <span
            >用时：<span class="red">{{
              item.useTime ? item.useTime + "分钟" : "未知"
            }}</span></span
          >
        </div>
        <div class="test-bottom">
          <div class="bottom-left">
            考试时间：{{ trimDate(item.createTime) }}
          </div>
          <div class="bottom-right" v-if="item.status == 2">
            <span>{{ item.score || 0 }}</span
            >分
          </div>
          <div class="bottom-right" v-else>
            <span style="font-size: 0.38rem;">评分中</span>
          </div>
        </div>
      </div>
      <van-empty
        v-if="record_list && record_list.length == 0"
        :description="'暂无考试记录哦~'"
      />
    </div>
    <div class="footer" v-if="record_list.length != 0 && record_list.length === total">
        <span class="tips">我是有底线的</span>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
import { getExamRecord, getMyTestRecord } from "~/api/v2-question-bank/question-bank.js";
export default {
  components: {
    WhiteHeader
  },
  data() {
    return {
      title: "考试记录",
      /* 考试记录 */
      record_list: [],
      total:0,
      page:1,
      pageSize:10,
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      is_loading(state) {
        return state.is_loading;
      },
      shallowColor(state) {
        return state.web_info.THEME_COLOR + "32";
      }
    }),
    /* 题套Id */
    questionId() {
      return this.$route.query.id;
    },
    /* 试卷类型 1专项训练 2模拟考试 3真题训练 */
    questionType() {
      return this.$route.query.questionType;
    }
  },
  watch: {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    throttle(fn, delay) {
      let lastTime = 0;
      return !(function() {
        let nowTime = Date.now();
        if (nowTime - lastTime > delay) {
          fn.call(this);
          lastTime = nowTime;
        }
      })();
    },
    pullUp() {
      // 滚动条离顶部的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 窗口可视区域高度
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 滚动区域高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 滚动条 + 可视区域高度 >= 滚动条高度 ==>  滚动条触底
      if (scrollTop + clientHeight >= scrollHeight) {
        if (this.total <= this.record_list.length) {
          return;
        }
        if (this.is_loading) {
          return;
        }
        this.page++;
        this.getExamRecord("pullup");
      }
    },
    eventListener() {
      this.throttle(this.pullUp, 300);
    },
    trimDate(date) {
      if (date) {
        let _date = new Date(date);
        let formatDate = (v)=>{
          if(v < 10){
            return '0' + v;
          }else{
            return v;
          }
        }
        return `${_date.getFullYear()}.${_date.getMonth() +
          1}.${_date.getDate()} ${formatDate(_date.getHours())}:${formatDate(_date.getMinutes())}:${formatDate(_date.getSeconds())}`;
      } else {
        return this.$t("locale.components.mobile.GroupChat.t7");
      }
    },
    /* 获取考试记录 */
    async getExamRecord(fetch_type) {
      this.SET_IS_LOADING(true);
      let params = {
        userId: this.user_info.id,
        questionGroupId: this.questionId,
        type:this.questionType,
        sort:'id desc',
        offset: this.pageSize * (this.page - 1),
        limit: this.pageSize,
      };
      let result = await getMyTestRecord(params);
      // console.log("获取考试记录：", result);
      if (result && result.data && result.data.code == 200) {
        if (fetch_type == "pullup") {
          this.record_list = [...this.record_list, ...result.data.data.rows];
        } else {
          this.record_list = result.data.data.rows;
        }
        this.total = result.data.data.total;
      }
      this.SET_IS_LOADING(false);
    },
    /* 跳转考试成绩 */
    toPath(detail) {
      if (detail && detail.status == 2) {
        const { id, paperType, paperId } = detail;
        if (id && paperType && paperId) {
          this.$router.push({
            path: "/m/v2-fraction-count",
            query: {
              id: this.questionId,
              type: "fraction",
              testRecordId: id,
              testType: paperType,
              testId: paperId
            }
          });
        }
      }
    },
    initPage() {
      this.page = 1;
      this.getExamRecord();
    }
  },
  created() {
    if (process.client) {
      if (!this.token && Object.keys(this.user_info).length == 0) {
        this.$router.replace("/m/login");
        return;
      }
    }
  },
  activated() {
    window.addEventListener("scroll", this.eventListener);
    this.initPage();
  },
  deactivated() {
    if (process.client) {
      window.removeEventListener("scroll", this.eventListener);
    }
  },
  destroyed() {
    if (process.client) {
      window.removeEventListener("scroll", this.eventListener);
    }
  },
  mounted() {
    if (process.client) {
      window.addEventListener("scroll", this.eventListener);
    }
  }
};
</script>

<style lang="scss" scoped>
.test-record {
  background-color: #f7f7fa;
  min-height: 100vh;
  width: 7.2rem;
  .footer {
    padding: 0.3rem;
    font-size: 0.26rem;
    color: #babec2;
    text-align: center;
    .tips {
      position: relative;
    }
    .tips::before {
      content: "";
      display: block;
      position: absolute;
      left: -1.7rem;
      top: 50%;
      transform: translateY(-1px);
      width: 1.5rem;
      height: 1px;
      background: #babec2;
    }
    .tips::after {
      content: "";
      display: block;
      position: absolute;
      right: -1.7rem;
      top: 50%;
      width: 1.5rem;
      transform: translateY(-1px);
      height: 1px;
      background: #babec2;
    }
  }
  .record-list {
    padding-top: 0.384rem;
    .record-item {
      width: 6.624rem;
      height: 2.208rem;
      background-color: #ffffff;
      border-radius: 0.192rem;
      margin: 0 auto 0.384rem;
      padding: 0.288rem;
      .test-top {
        display: flex;
        justify-content: space-between;
        font-size: 0.288rem;
        font-weight: bold;
        color: #4a4b4d;
        padding: 0.1rem 0 0.2rem;
        .top-left {
          width: 4.8rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .top-right {
          text-align: right;
          width: 1.2rem;
        }
      }
      .test-center {
        display: flex;
        align-items: center;
        font-size: 0.2304rem;
        color: #7a7d80;
        margin-top: 0.1rem;
        img {
          display: block;
          width: 0.288rem;
          height: 0.288rem;
          background: var(--theme-color);
          margin-right: 0.1rem;
        }
        .line {
          display: inline-block;
          width: 1px;
          height: 0.288rem;
          margin: 0 0.4rem;
          background-color: #abafb3;
        }
        .red {
          color: #f39090;
        }
      }
      .test-bottom {
        display: flex;
        align-items: baseline;

        .bottom-left {
          width: 4.8rem;
          font-size: 0.2304rem;
          color: #abafb3;
        }
        .bottom-right {
          width: 1.2rem;
          text-align: right;
          color: var(--theme-color);
          span {
            font-size: 0.4608rem;
          }
        }
      }
    }
  }
}
</style>
